import React, { useMemo } from 'react'
import { Select, Button, Modal, Spin } from 'antd'
import { useRecoilValue } from 'recoil'
import UploadFile from './components/UploadFile'
import UploadEvent from './components/UploadEvent'
import styles from './index.module.less'
import { context } from './_context'
import useHooks from './hooks'
import VariableList from '@/components/VariableList'
import TargetList from '@/components/TargetList'
import EventTable from '@/components/EventTable'
import { ITYPE } from './type'
import IconSvg from '@/components/IconSvg'
import PressureInjuryModal from '@/components/PressureInjuryModal'
import EventTitle from '@/components/EventTitle'
import { dictValuesSelector } from '@/store/dicts'

export default () => {
  const enumDict = useRecoilValue(dictValuesSelector)
  const selfHooks = useHooks()
  const {
    variableParams,
    basicMsg,
    varTargetType,
    variableTargetChange,
    eventParams,
    targetParams,
    eventTableParams,
    temporaryStorage,
    getTemplateHandle,
    setShowEventModal,
    setIsView,
    submitVerify,
    importVariableParams,
    importEventParams,
    showCheckTarget,
    readonly,
    submitBtnHandle,
    setShowCheckTarget,
    needGetPressure,
  } = selfHooks

  // 根据季度值获取对应季度名称
  const getQuarterHandle = (value?: string) => {
    if (value) {
      return enumDict.quarter.find((item: { label: string; value: string }) => item.value === value)?.label
    }
  }

  // 头部信息
  const header = useMemo(
    () => (
      <div className={styles.header}>
        <div className={styles.hospitalName}>{basicMsg?.hospitalName}</div>
        <div className={styles.time}>
          {basicMsg?.dataReportYear} {getQuarterHandle(basicMsg?.dataReportQuarter)} {basicMsg?.wardName}
        </div>
      </div>
    ),
    [basicMsg],
  )
  return (
    <context.Provider value={selfHooks}>
      <div className={styles.reportWrapper}>
        <div className={styles.headerWrapper}>
          <div className={styles.titleWrapper}>
            {header}
            {!readonly && (
              <div className={styles.btnBox}>
                <Button
                  style={{ marginRight: '16px' }}
                  icon={<IconSvg name='download-template' style={{ marginRight: '8px' }} />}
                  onClick={() => getTemplateHandle()}
                >
                  下载模板
                </Button>
                {/* <Button
                  style={{ marginRight: '16px' }}
                  icon={<IconSvg name='lead-into' style={{ marginRight: '8px' }} />}
                >
                  导入数据
                </Button> */}
                <UploadFile {...importVariableParams} />
                <Button
                  style={{ marginRight: '16px' }}
                  icon={<IconSvg name='moment-save' style={{ marginRight: '8px' }} />}
                  onClick={() => temporaryStorage()}
                >
                  暂存
                </Button>
                <Button
                  onClick={() => submitBtnHandle()}
                  icon={<IconSvg name='submit' style={{ marginRight: '8px' }} />}
                >
                  提交
                </Button>
              </div>
            )}
          </div>
          <Select
            style={{ width: '200px', marginRight: '16px' }}
            disabled
            value={`${basicMsg?.dataReportYear || ''} ${basicMsg?.dataReportQuarter || ''}`}
          >
            <Select.Option value={`${basicMsg?.dataReportYear || ''} ${basicMsg?.dataReportQuarter}`}>{`${
              basicMsg?.dataReportYear
            } ${getQuarterHandle(basicMsg?.dataReportQuarter)}`}</Select.Option>
          </Select>
          <Select style={{ width: '200px', marginRight: '16px' }} disabled value={basicMsg?.wardName || '全院'}>
            <Select.Option value={basicMsg?.wardName || '全院'}>{basicMsg?.wardName}</Select.Option>
          </Select>
          <Select style={{ width: '200px' }} onChange={(value) => variableTargetChange(value)} value={varTargetType}>
            <Select.Option value={ITYPE.VARIABLE}>变量数据</Select.Option>
            <Select.Option value={ITYPE.TARGET}>指标数据</Select.Option>
          </Select>
        </div>
        {varTargetType === ITYPE.VARIABLE ? <VariableList {...variableParams} /> : <TargetList {...targetParams} />}
      </div>
      <div className={styles.eventWrapper}>
        <div className={styles.header}>事件内容</div>
        <div className={styles.title}>
          <EventTitle style={{ flex: 1 }} text='医院压力性损伤相关信息收集表' />
          {!readonly && needGetPressure && (
            // {!readonly && (
            <div className={styles.btnWrapper}>
              <Button
                onClick={() => {
                  setShowEventModal(true)
                  setIsView(false)
                }}
                icon={<IconSvg name='lead-into' style={{ marginRight: '8px' }} />}
                style={{ marginRight: '16px' }}
              >
                新增事件数据
              </Button>
              <UploadEvent {...importEventParams} />
            </div>
          )}
        </div>
        <EventTable {...eventParams} />
      </div>

      {eventTableParams.visible && <PressureInjuryModal {...eventTableParams} />}

      <Modal
        footer={
          <div className={styles.targetBtnWrapper}>
            <Button type='primary' htmlType='submit' onClick={() => submitVerify()}>
              确认
            </Button>
            <Button style={{ marginLeft: '24px' }} onClick={() => setShowCheckTarget(false)}>
              取消
            </Button>
          </div>
        }
        width={920}
        onCancel={() => setShowCheckTarget(false)}
        title='提交'
        open={showCheckTarget}
      >
        <TargetList {...targetParams} />
      </Modal>
    </context.Provider>
  )
}
